<template>
  <div class="coupon">
    <PageContainer
      title="我的卡券"
      :containerStyle="{
        background: '#F5F5F5',
      }"
      back
      no-tab
    >
      <AutofixScroll :height="height" @bottom="onBottom">
        <div class="coupon-list">
          <div
            v-for="(item, index) in list"
            :key="index"
            :class="['item', item.status !== 0 ? 'disabled' : '']"
          >
            <div class="price">
              <span v-if="item.type === 2">{{ String(item.totalCoupon * 100).replace(/(0+)$/g,"") }}折</span>
              <span v-else>￥{{ item.totalCoupon }}</span>
            </div>
            <div class="order-info">
              <div class="title">{{ item.name }}</div>
              <div class="time">到期时间: {{ item.expireDate }}</div>
            </div>
          </div>
        </div>
        <u-loadmore
          :status="loadStatus"
          loadmoreText="加载更多"
          nomoreText="暂无更多卡券"
        />
      </AutofixScroll>
    </PageContainer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import PageContainer from "@/components/PageContainer/index.vue";
import AutofixScroll from "@/components/AutofixScroll/index";
import { useRouter } from "@/hooks/useRouter";
import { couponList } from "@/api";

const router = useRouter();

const height = `100%`;
const loadStatus = ref("loading");

const list = ref([]);

const params = {
  pageNo: 1,
  pageSize: 10,
};
let total = 0;

const getList = async () => {
  const res = await couponList(params);
  list.value = [...list.value, ...(res.records || [])];
  total = res.total;
  if (list.value.length >= total) {
    loadStatus.value = "nomore";
  }
};

const onBottom = () => {
  if (list.value.length >= total) {
    loadStatus.value = "nomore";
    return;
  }
  params.pageNo += 1;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style lang="less" scoped>
.coupon {
  .coupon-list {
    padding: 8px;
    .item {
      width: 343px;
      height: 94px;
      background: url("http://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/25/1.png");
      background-size: 100% 100%;
      color: #fff;
      margin: 16px auto;
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 16px;
      }

      &.disabled {
        color: #999999;
        background: url("http://xishifile.oss-cn-hangzhou.aliyuncs.com/202307/25/2.png");
      }

      .price {
        font-size: 24px;
        width: 94px;
        height: 94px;
        flex-shrink: 0;
        text-align: center;
        line-height: 94px;
      }

      .order-info {
        width: 100%;
        height: 100%;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          white-space: pre-line; /*允许换行*/
          overflow: hidden;
          text-overflow: ellipsis; /*省略号*/
          display: -webkit-box;
          -webkit-box-orient: vertical; /*行向垂直排列*/
          -webkit-line-clamp: 2; /*限制2行*/
          font-size: 14px;
        }
        .time {
          font-size: 10px;
          color: #999999;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
